@extends('pc_admin.app')

@section('content')
    <link rel="stylesheet" href="/css/pc-system/attendance-left.css">
    <link rel="stylesheet" href="/css/pc-system/person-attendance.css?v=2019052901">
    <script src="/js/date.js"></script>
    <script src="/kaohe/js/attendanceCalendar.js"></script>
    <script src="/js/moment.js"></script>
    <div class="mian-container">
        <div class="container-section person-attendance">
            @include(('pc_admin.attendance_left'))
            <div class="right-section">
                <div class="header-bk">
                    <div class="top-cell">
                        <img src="{{userlogo($user->id)}}">
                        <span>{{$user->qw_name}}</span>
                        {{--<div class="f-right">--}}
                            {{--<p class="inside-p">本月出勤状况<span class="span-num">{{$count}}</span></p>--}}
                        {{--</div>--}}
                    </div>
                    <div class="calendar-div">
                        <div class="div_changeMonth">
                            <span onclick="upMonth()"><i class="icon iconfont icon-arrLeft-fill1-copy"></i></span>
                            <span id="div_calendar_title" class="div_target_label"></span>
                            <span onclick="nextMonth()"><i class="icon iconfont icon-arrLeft-fill1"></i></span>
                        </div>
                        <div id="calendar_div" class="div_calendar">
                        </div>
                        <div class="list-colorp">
                            <p class="yellow-p"><span class="cir-span"></span>缺勤</p>
                            <p class="blue-p"><span class="cir-span"></span>公假</p>
                            <p class="green-p"><span class="cir-span"></span>加班</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="from_container"></div>
        </div>
    </div>

    <script>
            if($('.left-section').height()<$('.right-section').height()){
                $('.left-section').css('min-height',$('.right-section').height())
            }else{
                $('.right-section').css('min-height',$('.left-section').height());
            }
            var ac = new AttendanceCalendar("calendar_div", null, "div_calendar_title");
            ac.init();
            ac.setGetDataType(1);
            var model = {
                dValue: 'datetime',
                status: 'status',
                absense: 0,
                normal: 1,
                work:2,
                absense_normal:3,
                work_absense:4,
                work_normal:5,
                normal_work_absense:6
            };

            function upMonth() {
                ac.upMonth();
                ajax_next({{$id}});
                $("#from_container").empty();
            }
            function nextMonth() {
                ac.nextMonth();
                ajax_next({{$id}});
                $("#from_container").empty();

            }
            //日志上色
            function getData(ym) {

                var attendances = [];
                for (var i = 0; i < 30; i++) {
                    var num = GetRandomNum(0, 2);
                    attendances.push({day: i, status: num});
                }
                return attendances;
            }
            //初始化
            function setData(data) {
                $('[href^="tel:"]').removeAttr("href");
                attendances=[];

                for(var item in data) {
                    for (var index = 0; index < data[item].length; index++) {
                        attendances.push({datetime: item*1000,status: data[item][index]});
                    }

                }

                ac.setAttendance(attendances);
            }

            ac.setModel(model);
            setData({!!$event !!});
            moment().format();
            myclickDate=moment(ac.getCurrentDate(),"MMM DD");
            ac.setClickFn(clickFn);
            function clickFn(clickDate) {
                myclickDate=moment(clickDate)
                ajax_refresh({{$id}});
                $("#from_container").empty();
            }

            $('body').on('click','input.radio',function () {
                var domName = $(this).attr('name');
                var $radio = $(this);
                console.log($radio.data('waschecked'))
                if ($radio.data('waschecked') == true){
                    $radio.prop('checked', false);
                    $("input:radio[name='" + domName + "']").data('waschecked',false);
                } else {
                    $radio.prop('checked', true);
                    $("input:radio[name='" + domName + "']").data('waschecked',false);
                    $radio.data('waschecked', true);
                }
            })
            $('body').on('click','.icon-change',function () {
                $(this).parent().next().toggle();
                $(this).toggleClass('icon-cha');
            })
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            function ajax_attendance_update(id) {

                var url='/admin/attendance/'+id;
                var data=$('#attendance, :radio').serializeArray();
                    data.push({"name":"time","value":myclickDate.unix()});
                $.ajax({
                    type: 'put',
                    cache: 'false',
                    url: url,
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 'success') {
                            layer.msg(data.msg, {icon: 1});
                            window.location.href= data.redirectUrl;
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error: function () {
                        layer.msg('网络异常请重试', {icon: 2});
                    }
                });
            }
            function ajax_refresh(id){
                var url='/admin/attendance/from?id='+id+'&time='+myclickDate.unix();
                $.ajax({
                    type: 'get',
                    url: url,
                    success: function (data) {
                        $("#from_container").html(data);
                    },
                    error: function () {
                        layer.msg('网络异常请重试', {icon: 2});
                        return false;
                    }
                });
            }
          //请求上下月
            function ajax_next(id){
                var url='/admin/attendance/check/'+id;
                var time=moment(ac.getCurrentDate()).unix();
                $.ajax({
                    type: 'post',
                    cache: 'false',
                    url: url,
                    data:  'time=' + time,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 'success') {
    //                        layer.msg('success', {icon: 1});
                            ac.setAttendance(setData(data.data));
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error: function () {
                        layer.msg('网络异常请重试', {icon: 2});
                    }
                });
            }
            var ugid = {{$user->group_id}};
            $('#'+ugid).addClass('active');
    </script>
@endsection